import { defineLayout } from "$fresh/server.ts";
import { Head } from "$fresh/runtime.ts";
import { ResumeCTX } from "~/routes/resume/_middleware.ts";
import { MenuItem, NavBar } from "~/components/navbar.tsx";
import ThemeTrigger from "~/islands/theme-trigger.tsx";
import { Fragment } from "preact/jsx-runtime";

export default defineLayout<ResumeCTX>(
  (
    req,
    ctx,
  ) => {
    const urlObj = new URL(req.url);
    function formatUrl(path: string) {
      return `${path}?st=${ctx.state.st}`;
    }
    const navbarItem: MenuItem[] = [
      {
        name: "简历首页",
        href: formatUrl("/resume"),
        active: urlObj.pathname === "/resume",
      },
      {
        name: "关于我",
        href: formatUrl("/resume/about"),
        active: urlObj.pathname === "/resume/about",
      },
      {
        name: "联系我",
        href: formatUrl("/resume/contacts"),
        active: urlObj.pathname === "/resume/contacts",
      },
    ];
    const { name, nickname } = ctx.state.userInfo;
    return (
      <Fragment>
        <Head>
          <title>{name ?? nickname}的简历</title>
        </Head>
        <div class="min-h-screen flex flex-col">
          <nav class="bg-white relative border-gray-200 dark:bg-gray-900 flex-shrink-0">
            <div class="max-w-7xl flex flex-wrap items-center justify-between mx-auto p-4">
              <a
                href={formatUrl("/resume")}
                class="flex items-center space-x-3 rtl:space-x-reverse"
              >
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 via-red-700 to-yellow-600 dark:from-red-200 dark:via-red-300 dark:to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-medium ">
                  {name ?? nickname}的简历
                </span>
              </a>
              <div className="flex items-center justify-between gap-8">
                <ThemeTrigger class="hidden md:inline-block xs:inline-block" />
                {/* 窄屏触发展开菜单按钮 */}
                <NavBar items={navbarItem} />
                <ThemeTrigger class="hidden xl:inline-block" />
              </div>
            </div>
          </nav>
          <div class="flex-grow">
            <ctx.Component />
          </div>

          <footer class="bg-white rounded-lg shadow m-4 dark:bg-gray-800 flex-shrink-0">
            <div class="w-full mx-auto max-w-7xl p-4 xl:flex xl:items-center xl:justify-between">
              <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">
                © 2024{" "}
                <a href="https://xjm.deno.dev" class="hover:underline">
                  徐家铭
                </a>
              </span>
              <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 xl:mt-0">
                <li>
                  <a
                    href={formatUrl("/resume/about")}
                    class="hover:underline me-4 md:me-6"
                  >
                    关于我
                  </a>
                </li>
                <li>
                  <a
                    href={formatUrl("/resume/contacts")}
                    class="hover:underline"
                  >
                    联系方式
                  </a>
                </li>
              </ul>
            </div>
          </footer>
        </div>
      </Fragment>
    );
  },
);
